<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font 作业/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big-box {
            width: 100%;
            height: 100%;
        }

        .big-box .top {
            width: 100%;
            height: 70px;
            background-color: rgb(3, 170, 230);
            line-height: 70px;
            font-size: 20px;
        }

        .big-box .top .houtai {
            margin-left: 70px;
            margin-right: 70px;
            color: white
        }

        .big-box .top .icon-iconfonticon {
            font-size: 20px;
            color: #eee;
        }

        .big-box .top .user {
            float: right;
            margin-right: 70px;
            color: #eee;
        }

        .big-box .bottom {
            display: flex;
        }

        .big-box .bottom .left {
            width: 250px;
            line-height: 80px;
            box-sizing: border-box;
            padding: 0 30px;
            background-color: #2e2e6e;
            color: white;
        }

        .big-box .bottom .left ul li {
            list-style: none;
        }

        .big-box .bottom .left ul li .iconfont {
            margin-right: 22px;
        }

        .big-box .bottom .left ul li .rightjiantou {
            margin-left: 65px;
        }

        .big-box .bottom .right {
            flex: 1;
            background-color: #eee;
        }

        .big-box .bottom .right .top-first {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            background-color: #eee;
        }

        .big-box .bottom .right .top-first .icon-iconfontshumajiadian {
            margin-left: 20px;
            margin-right: 20px;
            font-size: 20px;
        }

        .big-box .bottom .right .top-first .shouye {
            display: inline-block;
            width: 150px;
            background-color: #2e2e6e;
            text-align: center;
            color: white;
        }

        .big-box .bottom .right .top-first .icon-iconfontshipin {
            display: inline-block;
            box-sizing: border-box;
            width: 60px;
            height: 60px;
            border-left: 1px solid rgb(184, 174, 174);
            border-right: 1px solid rgb(184, 174, 174);
            font-size: 20px;
            text-align: center;
            float: right;
            margin-right: 10px;
        }

        .big-box .bottom .right .top-first .yeqian {
            float: right;
            margin-right: 20px;
        }

        .big-box .bottom .right .top-second {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            background-color: #eee;
        }

        .big-box .bottom .right .top-second .today {
            width: 23%;
            box-sizing: border-box;
            padding: 0 20px;
        }

        .big-box .bottom .right .top-second .today .shouru {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .big-box .bottom .right .top-second .today .shouru .icon-iconfontxiebaopeishi,
        .icon-iconfontyiqiyibiao,
        .icon-iconfontgongyichongwu,
        .icon-iconfontfuzhuangneiyi {
            font-size: 40px;
            float: right;
            line-height: 65px;
            margin-right: 10px;
        }

        .big-box .bottom .right .top-second .today .money {
            font-size: 24px;
            height: 60px;
            line-height: 50px
        }

        .big-box .bottom .right .top-third {
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: space-around;
            background-color: #eee;
        }

        .big-box .bottom .right .top-third #zhuzhuangtu {
            width: 48%;
            background-color: #fff;
        }

        .big-box .bottom .right .top-third #zhexiantu {
            width: 48%;
            background-color: #fff;
        }

        .big-box .bottom .right .top-forth {
            width: 100%;
            height: 215px;
            margin-top: 20px;
            background-color: white;
            text-align: center;
        }

        .big-box .bottom .right .top-forth table thead tr {
            height: 40px;
            line-height: 40px;
        }

        .big-box .bottom .right .top-forth table thead tr th:first-child {
            width: 100px;
        }

        .big-box .bottom .right .top-forth table thead tr th {
            height: 40px;
            width: 320px;
            line-height: 40px;
        }
        .big-box .bottom .right .top-forth table tbody tr td{
            height: 40px;
            line-height: 40px;
        }
        .big-box .bottom .right .top-forth table tbody tr td .finished{
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: orange;
            line-height: 30px;
        }
        .big-box .bottom .right .top-forth table tbody tr td .bgcolor{
            display: inline-block;
            width: 250px;
            height: 20px;
            background-color: #ccc;
        }
        .big-box .bottom .right .top-forth table tbody tr td .bgcolor .prev{
            display: inline-block;
            width: 80px;
            height: 20px;
            background-color: rgb(78, 227, 78);
            float: left;
        }
        .big-box .bottom .right .top-forth table tbody tr td .prev:nth-child(3){
            display: inline-block;
            width: 150px;
            height: 20px;
            background-color: rgb(25, 93, 219);
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="top">
            <span class="houtai">后台管理系统</span>
            <span class="iconfont icon-iconfonticon"></span>
            <span class="user">当前用户:&nbsp;&nbsp;bootstrap中文&nbsp;&nbsp; 角色:&nbsp;&nbsp;管理员</span>
        </div>
        <div class="bottom">
            <div class="left">
                <ul>
                    <li><span class="iconfont icon-iconfont5"></span>后台首页<span class="rightjiantou">></span></li>
                    <li><span class="iconfont icon-iconfonticon1"></span>设计元素<span class="rightjiantou">></span></li>
                    <li><span class="iconfont icon-iconfonticonfonticon31"></span>表单元素<span
                            class="rightjiantou">></span></li>
                    <li><span class="iconfont icon-iconfonticonfonticon33"></span>示例页面<span
                            class="rightjiantou">></span></li>
                    <li><span class="iconfont icon-iconfontyouhuiquan"></span>常用列表<span class="rightjiantou">></span>
                    </li>
                    <li><span class="iconfont icon-iconfontshouji"></span>脚本插件<span class="rightjiantou">></span></li>
                    <li><span class="iconfont icon-iconfontphone"></span>统计图表<span class="rightjiantou">></span></li>
                </ul>
            </div>
            <div class="right">
                <div class="top-first">
                    <span class="iconfont icon-iconfontshumajiadian"></span>
                    <span class="shouye">欢迎首页</span>
                    <span class="yeqian">页签操作 ▽</span>
                    <span class="iconfont icon-iconfontshipin"></span>
                </div>
                <div class="top-second">
                    <div class="today" style="background-color: rgb(69, 175, 237);">
                        <div class="shouru"><span>今日收入</span><span class="iconfont icon-iconfontxiebaopeishi"></span>
                        </div>
                        <div class="money">100,000.00</div>
                    </div>
                    <div class="today" style="background-color: rgb(95, 107, 242);">
                        <div class="shouru"><span>昨日收入</span><span class="iconfont icon-iconfontyiqiyibiao"></span>
                        </div>
                        <div class="money">200,000.00</div>
                    </div>
                    <div class="today" style="background-color: rgb(90, 245, 141);">
                        <div class="shouru"><span>月累计收入</span><span class="iconfont icon-iconfontgongyichongwu"></span>
                        </div>
                        <div class="money">1000,000.00</div>
                    </div>
                    <div class="today" style="background-color: rgb(150, 157, 147);">
                        <div class="shouru"><span>年累计收入</span><span class="iconfont icon-iconfontfuzhuangneiyi"></span>
                        </div>
                        <div class="money">5,000,000.00</div>
                    </div>
                </div>
                <div class="top-third">
                    <div id="zhuzhuangtu"></div>
                    <div id="zhexiantu"></div>
                </div>
                <div class="top-forth">
                    <table>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>下单日期</th>
                                <th>状态</th>
                                <th>处理情况</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./moke.js"></script>
<script src="./promise-ajax.js"></script>
<script>
    function zhexiantu() {
        //创建并初始化一个echarts实例
        var count = document.querySelector('#zhexiantu')
        var e = echarts.init(count)
        //绘制图表
        e.setOption({
            title: {
                text: '每年收入走势',
                left: 'left',
            },
            legend: { //图例
                top: 20
            },
            xAxis: {
                data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2015', '2016', '2017', '2018', '2019', '2020']
            },
            yAxis: {
                // data:['0','20','40','60','80','100','120','140','160','180','200']
            },
            series: [
                {
                    name: '每年收入走势',
                    type: 'line',
                    data: [50, 55, 60, 40, 45, 40, 40, 65, 40, 68, 20, 72, 60],
                    symbolSize: 10,
                    Symbol: 'circle',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'green',
                            borderWidth: 2,
                            borderColor: 'yellow',
                            lineStyle: { width: 2 },
                            ShadowBlur: 5,
                            shadowColor: '#188df0'
                        }
                    }
                },
                {
                    name: '每年周期收入走势',
                    type: 'line',
                    data: [48, 50, 52, 48, 40, 35, 40, 65, 45, 58, 30, 72, 58],
                    symbolSize: 10,
                    Symbol: 'circle',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: 'gray',
                            borderWidth: 2,
                            borderColor: 'yellow',
                            lineStyle: { width: 2 },
                            ShadowBlur: 5,
                            shadowColor: '#188df0'
                        }
                    }
                }
            ]
        })
    }
    zhexiantu()
    function zhuzhuangtu() {
        //创建并初始化一个echarts实例
        var count = document.querySelector('#zhuzhuangtu')
        var e = echarts.init(count)
        //绘制图表
        e.setOption({
            title: {
                text: '每月收入',
                left: 'left',
            },
            legend: { //图例
                top: 20
            },
            xAxis: {
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
            },
            yAxis: {
                // data:['$0','$1k','$2k','$3k']
            },
            series: [
                {
                    name: '当前每月收入',
                    barWidth: 20,
                    color: 'blue',
                    type: 'bar',
                    data: ['2550', '1550', '1650', '3300', '4800', '3500', '1600', '2500', '2200', '1750', '3900', '1800']
                },
                {
                    name: '周期每月收入',
                    barWidth: 20,
                    color: 'rgb(195, 198, 200)',
                    type: 'bar',
                    data: ['2050', '1600', '1850', '3000', '4000', '3700', '1800', '2000', '2800', '2100', '3700', '3600']
                },
            ]
        })
    }
    zhuzhuangtu()
    function render() {
        ajax('get', './index.json', {}).then((data) => {
            console.log(data);
            var str = data.map((item, index) => {
                return `<tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.shop}</td>
                        <td>${item.date}</td>
                        <td><span class="finished">${item.zhuangtai}</span></td>
                        <td><span class="bgcolor"><span class="prev"></span></span></td>
                    </tr>`
            }).join('')
            //渲染表情
            document.querySelector('tbody').innerHTML = str;
        }).join('')
    }
    render()
</script>